<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>目的地标签选择</title>
    <style>
        *{margin: 0;padding: 0;list-style-type: none;}
        body{
            background: url(../../img/R-C.jpg) center/cover no-repeat;
            user-select: none;
        }
        .contain{
            width: 900px;
            height: 600px;
            margin: 150px auto;
            font-family: '花体';
        }
        .left,
        .right{
            width: 50%;
            height: 100%;
            float: left;
        }
        .contain .left{
            opacity: .6;
            background-color: aliceblue;
        }
        .contain .right{
            opacity: .8;
            background-color: #ccc;
        }
        .contain p{
            line-height: 30px;
            font-size: 20px;
            padding: 8px 20px;
        }
        /* 左侧 */
        .contain .target-city p:nth-child(1){
            color: chocolate;
        }
        .contain .target-city span{
            color: deepskyblue;
            cursor: pointer;
            margin: 0 4px;
        }
        .contain .target-city p:nth-child(1) span:hover{
            color: red;
            transition: .5s;
            width: 30px;
            height: 20px;
            background-color: antiquewhite;
        }
        .contain .target-city p:nth-child(2) span{
            display: inline-block;
            margin-top: 5%;
            padding: 4px 6px;
            border: 1px solid black;
        }
        .contain .target-city p:nth-child(2) span i{
            display: inline-block;
            margin-left: 4px;
        }
        .contain .target-city p:nth-child(2) i:hover{
            color: red;
        }
        /* 右侧 */
        .contain .right span{
            display: inline-block;
            margin-top: 5%;
            margin-left: 5%;
            padding: 4px 6px;
            font-size: 20px;
            border: 1px solid #fff;
            color: white;
        }
        @font-face {
            font-family: "花体";
            src: url('../../front/逐浪花体.otf');
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="contain">
            <div class="left">
                <div class="target-city">
                    <p>
                        热门城市：
                        <span>上海</span>
                        <span>北京</span>
                        <span>澳门</span>
                        <span>成都</span>
                        <span>广州</span>
                    </p>
                    <p>
                        <!-- 生成的节点 -->
                         <!-- <span>洛璃<i>X</i></span> -->
                    </p>
                </div>
            </div>
            <div class="right">
                <p>

                </p>
                <!-- <span>洛璃</span> -->
            </div>
        </div>
    </div>
    <script>
        //静态获取，后续插入不影响
        let allCity = document.querySelectorAll(".target-city p:nth-child(1) span"),
            selectCityP = document.querySelector(".target-city p:nth-child(2)"),
            confirmCityP = document.querySelector(".right p");
        
        for(let i = 0;i < allCity.length; ++i){
            //添加状态
            allCity[i].bool = true
            allCity[i].onclick = function(){
                //判断状态
                if(this.bool === true){
                    //生成节点
                    //左侧
                    let span = document.createElement("span"),
                        closeI = document.createElement("i")
                    //添加文本内容
                    span.innerHTML = this.innerHTML
                    closeI.innerHTML = "X"
                    span.appendChild(closeI)
                    selectCityP.appendChild(span)
                    //右侧
                    let domSpan = document.createElement("span")
                    domSpan.innerHTML = this.innerHTML
                    confirmCityP.appendChild(domSpan)

                    //点击关闭按钮
                    closeI.onclick = function(){
                        selectCityP.removeChild(span)
                        confirmCityP.removeChild(domSpan)
                        allCity[i].bool = true
                    }
                    //设置状态值
                    this.bool = false
                }
            }
        }
        /*
            需求分析：
                1.任意一个目的地，会在下方和右侧生成相同文字的节点
                    给目的地添加状态值
                2.下方的标签带有[x]，比右边多个子节点
                3.标签不可重复
                4.点击[x]按钮：
                    a) 移除自身节点
                    b) 右侧相同文字的节点也移除
                    c) 关闭移除后可再次点击
        */
    </script>
</body>
</html>